<template>
    <div class="update">
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <div class="pwd">
                    <el-form-item label="原始密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off" size="small">
                            <i class="el-icon-view el-input__icon" slot="suffix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新密码" :label-width="formLabelWidth">
                        <el-input v-model="form.newPassword" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" :label-width="formLabelWidth">
                        <el-input v-model="form.renewPassword" autocomplete="off" size="small"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
    name: 'Update',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        const validatorNumber = (rule, value, callback) => {
            let reg = /^\d+$/
        };
        return {
            dialogFormVisible: false,
            form: {
                newPassword: '',
                password: '',
                renewPassword: ''
            },
            formLabelWidth: '100px'
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.$bus.$on('updateShow', this.update)
    },
    methods: {
        ...mapMutations('userStore', ['updatePassword']),
        handleIconClick() {
        },
        update(value) {
            this.dialogFormVisible = value
        },
        ok() {
            this.updatePassword(this.form)
            this.dialogFormVisible = false
        }
    }
};
</script>
<style lang='less' scoped>
.update {
    width: 300px;

    .pwd {
        padding-right: 30px;

        .el-form-item {
            margin-bottom: 10px;

            .el-icon-view {
                font-size: 16px;
            }
        }
    }

    .dialog-footer {
        .el-button--primary {
            background-color: #11A983;
            margin-right: 30px;
        }

        .el-button--default:hover {
            color: #11a983;
            border-color: #11a983;
        }
    }
}
</style>